<template>
  <div>
    <el-card shadow="hover">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="网格" name="2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form label-width="120px" class="formBox">
                <el-form-item label="上午上班时间">
                  <el-time-picker
                    v-model="acceptance.morningStartTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="上午上班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="上午下班时间">
                  <el-time-picker
                    v-model="acceptance.morningEndTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="上午下班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="下午上班时间">
                  <el-time-picker
                    v-model="acceptance.afternoonStartTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="下午上班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="下午下班时间">
                  <el-time-picker
                    v-model="acceptance.afternoonEndTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="下午下班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="lifespanSubmit('2')">修改</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>打卡说明</span>
                </div>
                <div>
                  <div class="shuoRow">
                    <el-button type="success" circle></el-button>
                    <span class="shuotext">上班时间后打上班卡记为迟到</span>
                  </div>
                  <div class="shuoRow">
                    <el-button type="success" circle></el-button>
                    <span class="shuotext">下班时间前打下班卡记为早退</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="坐席/值班" name="3">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form label-width="120px" class="formBox">
                <el-form-item label="上午上班时间">
                  <el-time-picker
                    v-model="verify.morningStartTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="上午上班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="上午下班时间">
                  <el-time-picker
                    v-model="verify.morningEndTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="上午下班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="下午上班时间">
                  <el-time-picker
                    v-model="verify.afternoonStartTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="下午上班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="下午下班时间">
                  <el-time-picker
                    v-model="verify.afternoonEndTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="下午下班时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="lifespanSubmit('3')">修改</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>打卡说明</span>
                </div>
                <div>
                  <div class="shuoRow">
                    <el-button type="success" circle></el-button>
                    <span class="shuotext">上班时间后打上班卡记为迟到</span>
                  </div>
                  <div class="shuoRow">
                    <el-button type="success" circle></el-button>
                    <span class="shuotext">下班时间前打下班卡记为早退</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import * as api from '@/api/project'
export default {
  data() {
    return {
      activeName: '2',
      acceptance: {
        afternoonEndTime: '',
        afternoonStartTime: '',
        morningEndTime: '',
        morningStartTime: '',
      },
      verify: {
        afternoonEndTime: '',
        afternoonStartTime: '',
        morningEndTime: '',
        morningStartTime: '',
      },
    }
  },
  created() {
    this.handleClick({ name: '2' })
  },
  methods: {
    // 切换标签
    handleClick(e) {
      api.selectById({ roleId: e.name }).then(res => {
        if (res.code == '200') {
          if (e.name == '2') {
            this.acceptance.afternoonEndTime = res.data.afternoonEndTime
            this.acceptance.afternoonStartTime = res.data.afternoonStartTime
            this.acceptance.morningEndTime = res.data.morningEndTime
            this.acceptance.morningStartTime = res.data.morningStartTime
          } else if (e.name == '3') {
            this.verify.afternoonEndTime = res.data.afternoonEndTime
            this.verify.afternoonStartTime = res.data.afternoonStartTime
            this.verify.morningEndTime = res.data.morningEndTime
            this.verify.morningStartTime = res.data.morningStartTime
          }
        }
      })
    },
    // 修改时效
    lifespanSubmit(roleId) {
      let data = {
        roleId,
      }
      if (this.activeName == '2') {
        Object.assign(data, this.acceptance)
      } else if (this.activeName == '3') {
        Object.assign(data, this.verify)
      }
      api.attendanceUpdate(data).then(res => {
        if (res.code == '200') {
          this.$message.success('修改成功')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.shuoRow {
  margin-bottom: 10px;
  .shuotext {
    vertical-align: sub;
    margin-left: 15px;
  }
}
.formBox {
  width: 400px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeBody {
  width: 600px;
  ::v-deep .el-tree-node__content {
    height: 40px;
  }
}
</style>
